<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表与表格</title>
    <style>
        table {
            border-collapse: collapse;
            /*合并单元格边框*/
            width: 100%;
        }


        .table1 td {
            border: 1px solid black;
            /*设置单元格边框*/
            text-align: center;
            /*设置单元格内容居中*/
            padding: 10px;
            /*设置单元格内边距*/
        }

        .table1 th {
            background-color: #d1aeae;
            /*设置表头背景色*/
            border: 1px solid black;
            /*设置单元格边框*/
            text-align: center;
            /*设置单元格内容居中*/
            padding: 10px;
            /*设置单元格内边距*/
        }

        .table2 th {
            background-color: #a7a0a0;
        }

        ul {
            list-style: none;
            /*去掉列表符号*/
            display: flex;
        }

        ul li {
            padding: 20px;
            /*设置列表项内边距*/
            margin: 10px;
            /*设置列表项外边距*/
            border: 1px solid black;
            /*设置列表项边框*/
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <table border="1" class="table1">
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>80</td>
            <td rowspan="2">100</td><!--列合并-->
            <td>180</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>190</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">全市第一</td><!--行合并-->
        </tr>
    </table>
    <br>
    <table border="1" class="table2">
        <thead>
            <tr>
                <th>标签</th>
                <th>英文全称</th>
                <th>中文说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>a</td>
                <td>Anchor</td>
                <td>锚</td>
            </tr>
        </tbody>
    </table>
    <h1>
        无序列表
    </h1>
    <uL>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </uL>
    <h1>有序列表</h1>
    <ol>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <h1>自定义列表</h1>
    <dl>
        <dt>标题</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
    </dl>
    <!-- dl>dt+dd+dd+dd快捷生成标签 -->
</body>

</html>